<template>
  <div style="height: 100%;padding: 20px;">
    <Echart :options="options" height="100%" width="100%"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart/index.vue'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: newData.seriesData.map(item => item.name),
            top: 0
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: newData.categories,
            axisLabel: {
              interval: 0, // 强制显示所有标签
              rotate: 0    // 标签旋转角度，可根据需要调整
            }
          },
          yAxis: {
            type: 'value',
            name: '数量',
            min: 0,
            // 确保y轴刻度为整数
            axisLabel: {
              formatter: '{value}'
            },
            // 网格线配置
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: newData.seriesData.map(item => ({
            name: item.name,
            type: 'bar',
            data: item.data,
            // 柱子宽度
            barWidth: 30,
            // 数据标签
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }))
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
